<template>
  <div class="chat">
    <HeaderBar :title="chatUser" @back="goBack" />
    <div class="msg-list">
      <div v-for="msg in msgs" :key="msg.id" :class="['msg', msg.me ? 'me' : '']">
        <img :src="msg.avatar" class="avatar" />
        <div class="bubble">{{ msg.text }}</div>
      </div>
    </div>
    <div class="chat-bar">
      <van-icon name="chat-o" size="24" />
      <input class="input" v-model="input" placeholder="说点什么...." @keyup.enter="sendMsg" />
      <van-icon name="smile-o" size="24" />
      <van-icon name="plus" size="24" />
      <van-button type="primary" size="small" @click="sendMsg">发送</van-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import HeaderBar from '../components/HeaderBar.vue'
import { useTaskStore } from '../store/index.js'
const router = useRouter()
const route = useRoute()
const chatUser = route.params.userId || '用户'
const store = useTaskStore()
const input = ref('')
const userTask = store.tasks.find(t => t.author === chatUser)
const userAvatar = (userTask && userTask.avatar) ? userTask.avatar : `https://api.multiavatar.com/${chatUser}.svg`
const myTask = store.myTasks[0]
const myAvatar = (myTask && myTask.avatar) ? myTask.avatar : `https://api.multiavatar.com/me.svg`
const msgs = ref([
  { id: 1, text: '你要什么时候出来呀?', me: false, avatar: userAvatar },
  { id: 2, text: '已经已经出发啦！！', me: true, avatar: myAvatar }
])
function goBack() { router.back() }
function sendMsg() {
  if (!input.value.trim()) return
  msgs.value.push({
    id: Date.now(),
    text: input.value,
    me: true,
    avatar: myAvatar
  })
  input.value = ''
  setTimeout(() => {
    const list = document.querySelector('.msg-list')
    if (list) list.scrollTop = list.scrollHeight
  }, 50)
}
</script>
<style scoped>
.chat { 
  padding: 0 0 60px 0; 
  background: #fafbfa; 
  min-height: 100vh; 
  width: 100vw;
  box-sizing: border-box;
}
.msg-list { 
  padding: 8px; 
  padding-bottom: 80px;
}
.msg { 
  display: flex; 
  align-items: flex-end; 
  margin-bottom: 12px; 
}
.msg.me { 
  flex-direction: row-reverse; 
}
.avatar { 
  width: 36px; 
  height: 36px; 
  border-radius: 50%; 
  margin: 0 8px; 
  flex-shrink: 0;
}
.bubble { 
  background: #fff; 
  border-radius: 18px; 
  padding: 10px 16px; 
  max-width: 70vw; 
  font-size: 15px; 
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  word-break: break-word;
}
.msg.me .bubble { 
  background: #007AFF; 
  color: #fff;
}
.chat-bar { 
  position: fixed; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: #fff; 
  display: flex; 
  align-items: center; 
  padding: 8px 8px; 
  border-top: 1px solid #e5e5e5; 
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.input { 
  flex: 1; 
  border: none; 
  outline: none; 
  font-size: 16px; 
  margin: 0 8px; 
  background: #f1f3f4; 
  border-radius: 20px; 
  padding: 10px 16px; 
  min-height: 40px;
}
.van-button {
  border-radius: 20px;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
}
</style> 